@import '../../css/Variable.styl'

.iconbutton
  padding standardSpacing
  cursor pointer
  border-radius standardBorderRadius
  border-width 0px
  height auto
  white-space pre

  &:disabled
    opacity 0.65
    cursor not-allowed

  &-dark
    color fontColor
  &-light
    color offWhite

  &__text_with_icon
    padding-inline-start textSpacing
    white-space pre

  &__label
    display inline
    &-mobile
      margin-inline-start textSpacing
      display none

  // Intents styling
  &-primary
    background-color var(--primaryColor)
    &:hover
      background-color var(--primaryDarkColor)

  &-secondary
    background-color lightGrey2
    &:hover
      background-color secodaryButtonHover
    &-light
      border-color offWhite
    &-dark
      border-color var(--primaryDarkColor)

  &-link
    background-color transparent
    border none
    padding 0
    &:hover
      text-decoration underline
    &-light
      color darkGrey2
      &:hover
        color offBlack
    &-dark
      color fontColor
      &:hover
        color black

  &-pins
    padding 0
    border-radius 50% 50%
    border-width 1px
    &-light
      border-color offWhite
      background-color var(--primaryColor)
      &:hover
        background-color var(--primaryDarkColor)
    &-dark
      border-color var(--primaryDarkColor)
      background-color offWhite
      &:hover
        background-color lightGrey2

@media (min-width: min-xs) && (max-width: max-xs)
  .iconbutton
    &__icon
      margin 0
    &__label
      display none
      &-mobile
        display inline
